<template>
  <div class="root">
    <div class="body">
      <image class="img-top" src="https://olwr1lamu.qnssl.com/LOGO_logo.jpg"></image>
      <div class="box">
        <text class="text">账号:</text>
        <input ref="input" class="input" type="text" @input="onaccountinput" name="account" :value="account"></input>
      </div>
      <div class="box">
        <text class="text">密码:</text>
        <input ref="input" class="input" type="password" @input="onpasswordinput" name="password" :value="password"></input>
      </div>
      <div class="login-btn" @click="login">
        <text class="text-login">登录</text>
      </div>
    </div>
  </div>
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')

export default {
  mixins: [mixins],
  methods: {

    onaccountinput (event) {
      this.account = event.value
    },

    onpasswordinput (event) {
      this.password = event.value
    },
    
    login () {
      // 登录
      return stream.fetch({
          method: 'GET',
          type: 'JSON',
          url: this.imgUrl.collect.computerUrl +'login?account='+ this.account + '&pass_word=' + this.password
        }, callback => {
          
          if (callback.status == 200 && callback.data != null && callback.data != '') {
            
            storage.setItem('power', callback.data.power, event => {

            })

            modal.toast({
              message: '登录成功',
              duration: 0.3
            })

            // 跳转到主页
            this.router.push({
              page: this.routerPage.index
            })
          } else {
              modal.alert({
                message: '账号密码有误！',
                duration: 0.3
              }, callback => {})
          }
        })
    },

    // 设置权限 
    setPower (power) {
        storage.setItem('power', power, event => {
            // 保存本地回调函数
        })
    }
  }
}
</script>

<style>
    .root {
      width: 750px;
    }
    .body {
      margin-top: 100px;
      justify-content: center;
      align-items: center;
    }
    .box {
      margin-top: 20px;
      width: 500px;
      flex-direction: row;
    }
    .img-top {
      width: 370px;
      height: 370px;
    }
    .text {
      font-size: 40px;
    }
    .input {
      margin-left: 10px;
      font-size: 42px;
      width: 400px;
      color: #666666;
      border-width: 2px;
      border-style: solid;
      border-color: #41B883;
    }
    .login-btn {
      justify-content: center;
      align-items: center;
      height: 90px;
      width: 350px;
      background-color: #00CC00;
      border:2px solid;
      border-radius:10px;
      margin-top: 30px;
    }
    .text-login {
      flex-direction: row;
      font-size: 40px;
      color: #ffffff;
    }
</style>